<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" :width="size" :height="size" :fill="color">
    <path d="M16.5,2.84C13.15,2.84,12,4.07,12,4.07s-1.15-1.23-4.5-1.23S3,4.89,3,4.89v1.5c0,0.53,0.21,1.04,0.59,1.41L6,10.22v5.63 c0,0.45,0.3,0.84,0.74,0.97C6.83,16.84,6.92,16.85,7,16.85c0.33,0,0.65-0.17,0.84-0.46L12,9.7l4.16,6.69 c0.19,0.29,0.51,0.46,0.84,0.46c0.08,0,0.17-0.01,0.26-0.03C17.7,16.69,18,16.3,18,15.85v-5.63l2.4-2.4 c0.38-0.38,0.59-0.89,0.59-1.42V4.89C21,4.89,19.85,2.84,16.5,2.84z M7.5,5.2c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 S8.6,5.2,7.5,5.2z M16.5,5.2c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S17.6,5.2,16.5,5.2z" />
  </svg>
</template>

<script setup>
defineProps({
  size: {
    type: [String, Number],
    default: 24
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})
</script> 